<script setup lang="ts">
// 引入Element Plus图标
import {
  Briefcase,
  Calendar,
  Check,
  DocumentChecked,
  HomeFilled,
  InfoFilled,
  OfficeBuilding,
  PhoneFilled,
  User
} from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { computed, ref, watch } from "vue"
import { useCompanyStore } from "@/pinia/stores/company"

const props = defineProps<{
  modelValue: boolean
  companyId?: number
}>()

const emit = defineEmits<{
  "update:modelValue": [value: boolean]
  "close": []
}>()

const companyStore = useCompanyStore()
const loading = ref(false)
const visible = ref(props.modelValue)

// 直接从store计算获取公司详情
const companyDetail = computed(() => companyStore.currentDetail)

// 加载公司详情
async function loadCompanyDetail() {
  if (props.companyId === undefined || props.companyId === null || Number.isNaN(Number(props.companyId)) || Number(props.companyId) <= 0) {
    console.log("无效的公司ID:", props.companyId)

    console.warn("无效的公司ID:", props.companyId)
    return
  }

  loading.value = true
  try {
    const companyId = Number(props.companyId)
    await companyStore.fetchCompanyDetail(companyId)
  } catch (error) {
    console.error("加载公司详情失败:", error)
    ElMessage.error("加载公司详情失败")
  } finally {
    loading.value = false
  }
}

// 关闭弹窗时清除store中的详情数据
function handleClose() {
  emit("update:modelValue", false)
  emit("close")
  // 关闭时清除详情，避免数据残留
  setTimeout(() => {
    companyStore.clearCurrentDetail()
  }, 300)
}

// 监听modelValue变化，更新本地visible变量
watch(() => props.modelValue, (newValue) => {
  visible.value = newValue
})

// 优化监听逻辑
watch([() => visible.value, () => props.companyId], ([visibleState, companyId]) => {
  if (visibleState && companyId && !Number.isNaN(Number(companyId)) && Number(companyId) > 0) {
    loadCompanyDetail()
  }
}, { immediate: true })
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="companyDetail ? `${companyDetail.companyName} - 公司详情` : '公司详情'"
    width="1200px"
    :loading="loading || companyStore.detailLoading"
    @close="handleClose"
    class="company-detail-dialog"
  >
    <div v-if="companyDetail" class="company-detail-container">
      <!-- 公司头部信息卡片 -->
      <div class="company-header-card">
        <div class="company-logo">
          <el-avatar
            :size="80"
            :icon="OfficeBuilding"
            class="company-avatar"
          />
        </div>
        <div class="company-header-info">
          <h2 class="company-name">
            {{ companyDetail.companyName }}
          </h2>
          <div class="company-meta">
            <span class="company-meta-item" v-if="companyDetail.shortName">
              <InfoFilled class="meta-icon" /> {{ companyDetail.shortName }}
            </span>
            <span class="company-meta-item">
              <el-tag :type="companyDetail.status === '正常' ? 'success' : 'warning'" size="small">
                <Check class="tag-icon" /> {{ companyDetail.status }}
              </el-tag>
            </span>
          </div>
          <!-- 公司标签 -->
          <div v-if="companyDetail.tags && companyDetail.tags.length > 0" class="company-tags compact">
            <el-tag
              v-for="tag in companyDetail.tags"
              :key="tag"
              type="info"
              effect="plain"
              size="small"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 第一列：基本信息、公司资质 -->
      <div class="column-1">
        <!-- 基本信息 -->
        <div class="detail-card">
          <h3 class="card-title">
            <el-icon><InfoFilled /></el-icon>
            基本信息
          </h3>
          <div class="info-grid dense">
            <div class="info-item">
              <HomeFilled class="info-icon" />
              <span class="info-label">工作城市:</span>
              <el-tag type="info" effect="plain" size="small" class="info-tag">
                {{ companyDetail.workCity || '-' }}
              </el-tag>
            </div>
            <div class="info-item">
              <OfficeBuilding class="info-icon" />
              <span class="info-label">公司类型:</span>
              <el-tag type="info" effect="plain" size="small" class="info-tag">
                {{ companyDetail.companyType || '-' }}
              </el-tag>
            </div>
            <div class="info-item">
              <User class="info-icon" />
              <span class="info-label">公司规模:</span>
              <el-tag type="info" effect="plain" size="small" class="info-tag">
                {{ companyDetail.companyScale || '-' }}
              </el-tag>
            </div>
            <div class="info-item">
              <Calendar class="info-icon" />
              <span class="info-label">到期时间:</span>
              <span class="info-value">{{ companyDetail.expirationTime || '-' }}</span>
            </div>
          </div>
        </div>

        <!-- 公司资质 -->
        <div class="detail-card">
          <h3 class="card-title">
            <el-icon><DocumentChecked /></el-icon>
            公司资质
          </h3>
          <div class="info-grid dense">
            <div class="info-item full-width">
              <DocumentChecked class="info-icon" />
              <span class="info-label">营业执照号码:</span>
              <span class="info-value">{{ companyDetail.licenseNo || '-' }}</span>
            </div>
            <div v-if="companyDetail.licenseUrl" class="info-item full-width license-wrapper">
              <DocumentChecked class="info-icon" />
              <span class="info-label">营业执照:</span>
              <div class="license-container">
                <el-image
                  :src="companyDetail.licenseUrl"
                  :preview-src-list="[companyDetail.licenseUrl]"
                  fit="cover"
                  class="license-image-small"
                  :initial-index="0"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二列：联系方式、公司介绍 -->
      <div class="column-2">
        <!-- 联系方式和地址 -->
        <div class="detail-card">
          <h3 class="card-title">
            <el-icon><PhoneFilled /></el-icon>
            联系方式
          </h3>
          <div class="info-grid dense">
            <div class="info-item">
              <User class="info-icon" />
              <span class="info-label">联系人:</span>
              <span class="info-value">{{ companyDetail.contactPerson || '-' }}</span>
            </div>
            <div class="info-item">
              <PhoneFilled class="info-icon" />
              <span class="info-label">联系电话:</span>
              <span class="info-value">{{ companyDetail.contactPhone || '-' }}</span>
            </div>
            <div class="info-item">
              <InfoFilled class="info-icon" />
              <span class="info-label">发布人:</span>
              <span class="info-value">{{ companyDetail.publishUserName || '-' }}</span>
            </div>
            <div class="info-item full-width">
              <HomeFilled class="info-icon" />
              <span class="info-label">公司地址:</span>
              <span class="info-value">{{ companyDetail.address || '-' }}</span>
            </div>
          </div>
        </div>

        <!-- 公司介绍 -->
        <div class="detail-card">
          <h3 class="card-title">
            <el-icon><OfficeBuilding /></el-icon>
            公司介绍
          </h3>
          <div class="company-intro-text">
            {{ companyDetail.introduction || '暂无介绍信息' }}
          </div>
        </div>
      </div>

      <!-- 第三列：相关岗位（占两行） -->
      <div v-if="companyDetail.positionList && companyDetail.positionList.length > 0" class="column-3">
        <!-- 相关岗位 -->
        <div class="detail-card">
          <h3 class="card-title">
            <el-icon><Briefcase /></el-icon>
            相关岗位
          </h3>
          <div class="position-list">
            <div
              v-for="(position) in companyDetail.positionList.slice(0, 2)"
              :key="position.positionId"
              class="position-item"
            >
              <div class="position-header">
                <div class="position-info">
                  <h4 class="position-name">
                    {{ position.positionName }}
                  </h4>
                </div>
                <el-tag :type="position.status === '招聘中' ? 'success' : 'danger'" size="small" class="position-status">
                  {{ position.status }}
                </el-tag>
              </div>
              <div class="position-details">
                <span class="detail-text">招聘人数: {{ position.recruitNum }}人</span>
                <span class="detail-text">申请人数: {{ position.applyCount }}人</span>
                <span class="detail-text">通过人数: {{ position.passCount }}人</span>
                <span class="detail-text">录取人数: {{ position.admissionCount }}人</span>
              </div>
            </div>
            <!-- 查看更多链接 -->
            <div v-if="companyDetail.positionList.length > 2" class="view-more">
              <el-button type="text" size="small" class="view-more-btn">
                查看更多 {{ companyDetail.positionList.length - 2 }} 个岗位
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据时的占位显示 -->
    <div v-else-if="!loading && !companyStore.detailLoading" class="empty-state">
      <el-empty description="暂无公司信息" :image-size="200" />
    </div>

    <template #footer>
      <el-button @click="handleClose" class="close-button">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-dialog) {
  .el-dialog__header {
    background: #f8f9fa;
    padding: 20px 25px;
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }

  .el-dialog__body {
    padding: 25px;
    max-height: none; /* 移除最大高度限制 */
    overflow-y: visible; /* 移除滚动条 */
  }

  /* 当相关岗位列不存在时，减小弹窗宽度 */
  &:has(.company-detail-container:not(:has(.column-3))) {
    width: 800px !important;
  }
}

.company-detail-dialog {
  .el-dialog__footer {
    padding: 15px 25px 20px;
    border-top: 1px solid #ebeef5;
  }
}

.company-detail-container {
  display: grid;
  grid-template-columns: 1fr 1fr 350px;
  grid-template-rows: auto 1fr;
  gap: 16px;
  /* 确保所有列的高度一致 */

  /* 布局区域 */
  .company-header-card {
    grid-column: 1 / -1;
  }

  .column-1 {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0; /* 确保flex子元素可以收缩 */
    height: 100%; /* 确保列高与第三列一致 */
  }

  .column-2 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0; /* 确保flex子元素可以收缩 */
    height: 100%; /* 确保列高与第三列一致 */
  }

  .column-3 {
    grid-column: 3;
    grid-row: 2;
    /* 第三列占两行 */
    display: flex;
    flex-direction: column;
    height: 100%; /* 确保列高固定 */
  }

  /* 当相关岗位不存在时，调整前两列布局 */
  &:not(:has(.column-3)) {
    grid-template-columns: 1fr 1fr;
  }
}

.company-header-card {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px 25px;
  color: #303133;
  border: 1px solid #e9ecef;
  margin-bottom: 16px;
}

.company-logo {
  margin-right: 24px;
}

.company-avatar {
  background: #e6f7ff;
  color: #1890ff;
  font-size: 36px;
  border: 1px solid #91d5ff;
}

.company-header-info {
  flex: 1;
}

.company-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
}

.company-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.company-meta-item {
  font-size: 14px;

  .meta-icon {
    margin-right: 4px;
    vertical-align: middle;
  }

  .tag-icon {
    margin-right: 2px;
  }
}

.detail-card {
  background: white;
  border-radius: 6px;
  padding: 14px 18px;
  border: 1px solid #e9ecef;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 让卡片占满剩余空间 */
  min-height: 0; /* 确保内容溢出时可以收缩 */
  flex-shrink: 1; /* 允许卡片收缩 */
}

.card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f2f5;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  flex-grow: 1; /* 让信息网格占满剩余空间 */
  min-height: 0; /* 确保内容溢出时可以收缩 */

  &.dense {
    gap: 12px;
  }
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;

  &.full-width {
    grid-column: 1 / -1;
  }

  &.license-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .info-icon {
    width: 16px;
    height: 16px;
    color: #6c757d;
  }

  .info-tag {
    margin-left: auto;
  }
}

.info-label {
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
  flex-shrink: 0;
  width: 80px;
}

.info-value {
  font-size: 14px;
  color: #212529;
  line-height: 1.5;
  word-break: break-all;
  flex: 1;
}

.company-intro-text {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #495057;
  white-space: pre-wrap;
  border-left: 3px solid #17a2b8;
  min-height: 100px;
  flex-grow: 1; /* 让介绍文本区域占满剩余空间 */
  overflow-y: auto; /* 当内容过多时可以滚动 */
}

/* 新增样式 */
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-column: 1 / -1;
}

.detail-card资质,
.detail-card介绍 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-card职位 {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-bottom: 10px;
}

/* 标签样式已移至公司头部信息卡片内 */

.company-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;

  &.compact {
    gap: 6px;
    padding: 4px 0;
  }
}

.license-container {
  display: flex;
  align-items: center;
}

.license-image-small {
  width: 100px;
  height: 70px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;

  &:hover {
    border-color: #adb5bd;
  }
}

.status-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.position-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
  flex-grow: 1; /* 让职位列表占满剩余空间 */
}

.view-more {
  text-align: center;
  margin-top: 8px;
  padding: 8px 0;
}

.view-more-btn {
  color: #1890ff;
  font-size: 13px;
  padding: 0;
}

.view-more-btn:hover {
  color: #40a9ff;
  background-color: transparent;
}

.position-item {
  padding: 16px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background-color: #f8f9fa;
  transition: all 0.2s ease;

  &:hover {
    border-color: #adb5bd;
    background-color: #f1f3f5;
  }
}

.position-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.position-info {
  flex: 1;
}

.position-name {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 8px 0;
}

.position-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.position-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #6c757d;

  .position-icon {
    width: 14px;
    height: 14px;
  }
}

.position-status {
  margin-left: 16px;
}

.position-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #495057;

  .detail-text {
    background-color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
  }
}

.close-button {
  min-width: 80px;
  transition: all 0.3s ease;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #6c757d;
}

@media (max-width: 1280px) {
  .el-dialog {
    width: 98% !important;
    margin: 0 auto;

    /* 当相关岗位列不存在时，在小屏幕上减小最大宽度 */
    &:has(.company-detail-container:not(:has(.column-3))) {
      width: 90% !important;
      max-width: 700px;
    }
  }

  .company-detail-container {
    grid-template-columns: 1fr 1fr 300px;

    /* 当相关岗位不存在时的布局调整 */
    &:not(:has(.column-3)) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@media (max-width: 1024px) {
  .company-detail-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;

    .column-1 {
      grid-column: 1;
      grid-row: 2;
    }

    .column-2 {
      grid-column: 2;
      grid-row: 2;
    }

    .column-3 {
      grid-column: 1 / -1;
      grid-row: 3;
    }
  }
}

@media (max-width: 768px) {
  .company-detail-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;

    .column-1,
    .column-2,
    .column-3 {
      grid-column: 1;
    }

    .column-1 {
      grid-row: 2;
    }

    .column-2 {
      grid-row: 3;
    }

    .column-3 {
      grid-row: 4;
    }
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-item {
    flex-direction: column;
  }

  .info-label {
    width: auto;
  }
}

@media (max-width: 768px) {
  .company-header-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-item {
    flex-wrap: wrap;
  }

  .license-container {
    margin-top: 8px;
  }

  .license-image-small {
    width: 100%;
    max-width: 180px;
    height: auto;
  }

  .position-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .position-status {
    margin-left: 0;
  }

  .position-details {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
